<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>

    <script src="../js/vue.js">

    </script>
</head>
<body>

<div id="root">
    <ul>
        <!--
        vue中的key是用来标识每一个节点的,当我们使用v-for进行列表渲染的时候 我们需要给每一个节点添加一个唯一的key值 这样可以提高列表渲染的效率

        对比规则：diff算法的核心就是通过同层的节点进行比较 如果节点的key值相同 那么就不会进行移动 如果节点的key值不同 那么就会进行移动

        使用index作为key值 会导致列表的顺序发生变化 因为index是动态的 所以会导致列表的顺序发生变化 所以我们应该使用唯一的标识符作为key值 这样可以提高列表渲染的效率
        -->
        <!--        使用v-for进行列表渲染 遍历数组-->
        <!--        v-for="(item,index) in persons"  item是数组中的每一项 index是数组中的每一项的索引-->
        <li v-for="(item,index) in persons" :key="item.id">
            {{item.name}}的年龄是{{item.age}}
        </li>
    </ul>
    <ul>
        <!--        使用v-for进行列表渲染 遍历对象-->
        <!--        v-for="(item,index) in persons"  item是数组中的每一项 index是数组中的每一项的索引-->
        <li v-for="(item,index) of car" :key="item.id">
           {{item}}--{{index}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            persons: [{
                name: '张三',
                age: 18,
                id: 1,
            }, {
                name: '李四',
                age: 20,
                id: 2,
            }, {
                name: '王五',
                age: 22,
                id: 3,
            }],
            car:{
                name:'奔驰',
                price:300000,
                id:1,
            }
        },
        methods: {}
    });

</script>
</body>

</html>